<template>
  <div class="container">
    <div class="title">特长标签</div>
    <div class="labelList">
        <div
         :class="{'labelList_item':true,'labelList_item_active':item.selected==true}"
          v-for="(item,index) of labelList"
          :key="index"
          @click="selectLabel(item.id,index)">
          {{item.name}}
          </div>
    </div>
    <div class="commit" @click="commit">
        <div>保存</div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data () {
    return {  
      labelList:'',
      labelArr:[]
    }
  },

  methods: {
    async getLabel(){
     let res=await this.$axios('/resume/getLabel')
     if(res.data.level=='success'){
       this.labelList=res.data.data
     }
    },
    selectLabel(id,index){
      // console.log(this.labelArr.includes(id)==false)
      if(this.labelArr.length==4 && !this.labelArr.includes(id)){
        Toast('最多只能选择4个标签啊')
        return
      }
      if(this.labelList[index].selected=true){
        // this.labelList[index].selected=false
        this.$set(this.labelList[index],'selected',false)
      }
      if(!this.labelArr.includes(id)){
        this.labelArr.push(id)
        this.$set(this.labelList[index],'selected',true)
      }else{
        const index=this.labelArr.indexOf(id)
        this.labelArr.splice(index,1)
      }
      this.$forceUpdate()

    },
    async commit(){
      if(this.labelArr.length==0){
        Toast('请先选择标签')
        return
      }
      let res=await this.$axios.post('/resume/addResume',{
        type:'skill_label',
        // user_token:userToken,
        type_id:this.labelArr
        })
      if(res.data.level=='success'){
        this.$currency.showToast('填写成功',1500,'success')
        setTimeout(()=>{
          this.$router.go(-1)
        },1500)
      }else{
        Toast(res.data.message)
      }
    }
    
  },
  activated(){
    this.getLabel()
  },
  onShow(){
    // this.getLabel()
  }
}
</script>

<style scoped>
.title{width: 100%;height: 51px;line-height: 51px;text-align: center;font-size: 22px;color: #000000;background-color: #fff;margin-bottom: 5px;}
.container{padding-bottom:89px;background-color: #F8F8FB}

.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;z-index: 999999}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);border-radius: 8px;margin: 12.5px auto;color: #FFFFFF;}

.arrow{margin-right: 10px;font-size: 20px;color:#B2B2B9;float:right;width:auto!important}

.labelList{
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
.labelList_item{
  padding:2.5px 15px;
  margin:5px 10px;
  border:2px solid #57D1E2;
  color:#57D1E2;
  border-radius: 10px;
  font-size: 16px;
}
.labelList_item_active{
  background: #57D1E2;
  color: #FFFFFF;
}
</style>
